<template>
  <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column type="expand" >
          <template slot-scope="props" >
            <el-form label-position="center"  inline class="demo-table-expand">
              <el-form-item label="订单类型">
                <span>{{ props.row.categoryName }}</span>
              </el-form-item>
              <el-form-item label="订单金额">
                <span>{{ props.row.orderAmount }}</span>
              </el-form-item>
              <el-form-item label="支付方式">
                <span>{{ props.row.wayName }}</span>
              </el-form-item>
              <el-form-item label="支付金额">
                <span>{{ props.row.wayAmount }}</span>
              </el-form-item>
              <el-form-item label="课程编号">
                <span>{{ props.row.courseNumber }}</span>
              </el-form-item>
              <el-form-item label="课程名称">
                <span>{{ props.row.courseName }}</span>
              </el-form-item>
              <el-form-item label="课时数量">
                <span>{{ props.row.courseHours }}</span>
              </el-form-item>
              <el-form-item label="销售顾问">
                <span>{{ props.row.nickName }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="订单编号"
          prop="orderNumber">
        </el-table-column>
        <el-table-column
          label="订单日期"
          prop="orderDate">
        </el-table-column>
        <el-table-column
          label="订单所属"
          prop="studentName">
        </el-table-column>
      </el-table>
  </div>
</template>
<script>

import { getOrder } from '../../../api/order/order'

export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    getDetailsListByNumber() {
      getOrder(this.$route.query.orderNumber).then(response => {
        if (response.code === 200) {
          this.tableData = response.data
        }
      })
    }
  },
  created() {
    this.getDetailsListByNumber();//进入页面加载方法
    console.log(this.$route.query.orderNumber, '订单页面传值')//上页面传过来的详情id
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;

}
</style>
